import React, {FC, useContext, useEffect, useState} from 'react';
import "./index.less";
import {HxConfigContext} from "@/layouts/HxConfigContext";
import HxJournalListItem from "@/components/HxJournal/HxJournalListItem";
import {FormattedMessage, Link, useNavigate} from "umi";
import HxButtonRadioGroup from "@/components/HxButtonRadioGroup";
import {Button, Spin} from "antd";
import {useRequest} from "ahooks";
import * as API from "@/services";
import useBreakpoint from 'antd/es/grid/hooks/useBreakpoint';

interface JournalPageProps {
}

const JournalPage: FC<JournalPageProps> = (props) => {
  const navigate = useNavigate();
  const [languageType, setLanguageType] = useState<"CN" | "EN">("CN")
  const screens = useBreakpoint();
  const isMobile = !(screens.lg || screens.xxl || screens.xl);

  const journalsReq = useRequest(() => API.queryFrontJournals({
    pageSize: 1000,
    sort: ["journal_sort,asc"],
    languageType
  }), {
    refreshDeps: [languageType]
  });


  return (
    <div className={"journal-page-container"}>
      <div className={"journal-data-header"}>
        <div className={"journal-type-filter-wrapper"}>
          <HxButtonRadioGroup size={"large"} value={languageType} onChange={(e) => setLanguageType(e.target.value)} options={[
            {label: <FormattedMessage id="journal.cn-journal"/>, value: 'CN'},
            {label: <FormattedMessage id="journal.en-journal"/>, value: 'EN'},
          ]}/>
        </div>
        {
          !isMobile && (
            <div>
              <Link to="/journal/about"><Button type="primary" size={"large"}> <FormattedMessage id="journal.editing-system-entrance"/></Button></Link>
            </div>
          )
        }

      </div>
      <div className={"journal-data-list"}>
        <Spin spinning={journalsReq.loading}>
          {
            journalsReq.data?.data?.map((journal: API.FrontJournal) => (
              <HxJournalListItem key={journal.id} journal={journal}/>
            ))
          }
        </Spin>
      </div>
    </div>
  );
};

export default JournalPage;
